<template>
  <div class="author-manage">
    <div class="operation-bar">
      <a-button type="primary" @click="showAddModal">新增作者</a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="authorList"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #action="{ record }">
        <a-space>
          <a @click="handleEdit(record)">编辑</a>
          <a-popconfirm
            title="确定要删除这个作者吗？"
            @confirm="handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <!-- 新增/编辑弹窗 -->
    <a-modal
      :title="modalTitle"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form :form="form">
        <a-form-item label="作者名称">
          <a-input
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入作者名称' }] }
            ]"
          />
        </a-form-item>
        <a-form-item label="笔名">
          <a-input
            v-decorator="[
              'penName',
              { rules: [{ required: true, message: '请输入笔名' }] }
            ]"
          />
        </a-form-item>
        <a-form-item label="联系方式">
          <a-input
            v-decorator="[
              'contact'
            ]"
          />
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea
            v-decorator="[
              'description'
            ]"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'AuthorManage',
  data() {
    return {
      loading: false,
      modalVisible: false,
      modalTitle: '新增作者',
      form: this.$form.createForm(this),
      columns: [
        {
          title: '作者名称',
          dataIndex: 'name'
        },
        {
          title: '笔名',
          dataIndex: 'penName'
        },
        {
          title: '作品数量',
          dataIndex: 'novelCount'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      authorList: []
    }
  },
  created() {
    this.fetchAuthorList()
  },
  methods: {
    async fetchAuthorList() {
      this.loading = true
      try {
        const res = await this.$api.novel.getAuthorList({
          page: this.pagination.current,
          pageSize: this.pagination.pageSize
        })
        if (res.code === 200) {
          this.authorList = res.data.list
          this.pagination.total = res.data.total
        } else {
          this.$message.error(res.message || '获取作者列表失败')
        }
      } catch (error) {
        this.$message.error('获取作者列表失败: ' + error.message)
      }
      this.loading = false
    },
    showAddModal() {
      this.modalTitle = '新增作者'
      this.modalVisible = true
      this.form.resetFields()
    },
    handleEdit(record) {
      this.modalTitle = '编辑作者'
      this.modalVisible = true
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: record.name,
          penName: record.penName,
          contact: record.contact,
          description: record.description
        })
      })
    },
    async handleModalOk() {
      try {
        const values = await new Promise((resolve, reject) => {
          this.form.validateFields((errors, values) => {
            if (errors) {
              reject(errors)
            } else {
              resolve(values)
            }
          })
        })
        
        try {
          await this.$api.novel.createAuthor(values)
          this.$message.success('保存成功')
          this.modalVisible = false
          this.fetchAuthorList()
        } catch (error) {
          this.$message.error('保存失败: ' + error.message)
        }
      } catch (error) {
        // 表单验证失败
      }
    },
    handleModalCancel() {
      this.modalVisible = false
    },
    async handleDelete(id) {
      try {
        await this.$api.novel.deleteAuthor(id)
        this.$message.success('删除成功')
        this.fetchAuthorList()
      } catch (error) {
        this.$message.error('删除失败: ' + error.message)
      }
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.fetchAuthorList()
    }
  }
}
</script>

<style lang="scss" scoped>
.author-manage {
  padding: 24px;
  
  .operation-bar {
    margin-bottom: 16px;
  }
}
</style> 